<script setup lang="ts" name="ResultDetail">
import dayjs from "dayjs";

const route = useRoute();
const { t } = useI18n();

let data: any = route.query;
let detail = { ...data, periodNumList: JSON.parse(data.periodNumList) };
const OfficialCodeList = ['1','2','3','4']
const levelFunc = (ruleGrade: Number) => {
  switch (ruleGrade) {
    case 1:
      return t("result.test4");
    case 2:
      return t("result.test5");
    case 3:
      return t("result.test6");
    case 4:
      return t("result.test7");
    case 5:
      return t("result.test8");
    case 6:
      return t("result.test9");
  }
};
</script>

<template>
  <div class="ResultDetailPage">
    <DetailHeader :title="t('result.title3')" :isNeedBackIcon="true" />
    <div class="rewardDetail">
      <div class="rewardName">{{ detail?.lotteryPlanName }}</div>
      <div class="time">
        <span>{{ detail?.period }}</span>
        {{ dayjs(+detail?.createTime).format('DD-MM-YYYY hh:mm A') }}
      </div>
      <!-- <div class="searchTickets">
            <input type="text" placeholder="enter you ticket no">
            <div class="check">查看</div>
        </div> -->
    </div>
    <div class="resultList">
      <div v-if="OfficialCodeList.indexOf(data.type) >=0">
        <img :src="data.lotteryUrl" alt="">
      </div>
      <div
        v-else
        class="item"
        v-for="(item, index) in detail.periodNumList"
        :key="index"
      >
        <div class="top">{{ levelFunc(item.ruleGrade) }}</div>
        <div class="bottom">
          <div>₹{{ item.bonus }}</div>
          <div>{{ item.winningNumber }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
@import url("./index.scss");
</style>
